<template>
  <div class="box" v-if="pylst != null">
    <Songreview :pylst="pylst"></Songreview>

    <div class="banner">
      <h3 class="smit">歌曲列表</h3>

      <ul class="hotSong" v-if="hotSong.length > 0">
        <li v-for="(s, index) in hotSong" :key="s.id">
          <SongItem :item="s" @add-list="addMusicList(hotSong)">{{
            index + 1
          }}</SongItem>
        </li>
      </ul>
      <Loading v-if="hotSong.length == 0"></Loading>
    </div>
    <!-- <h3 class="smit" style="magin-left: 210px">精彩评论</h3> -->
    <div class="foot">
      <ul class="hotComent">
        <template v-if="hotComents.length > 0">
          <li v-for="m in hotComents" :key="m.id">
            <Comment :item="m"></Comment>
          </li>
        </template>
        <template v-if="Coments.length > 0">
          <li v-for="m in Coments" :key="m.id">
            <Comment :item="m"></Comment>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";
import Songreview from "@/components/Songreview";
import Comment from "@/components/Comment";
export default {
  components: {
    Loading,
    Songreview,
    SongItem,
    Comment,
  },
  data() {
    return {
      listID: null,
      pylst: null,
      sglist: [],
      hotSong: [],
      playList: null,
      page: 1,
      hotComents: [],
      Coments: [],
    };
  },

  created() {
    this.listID = this.$route.params.id;
    this.$http
      .get("/playlist/detail?id=" + this.listID)
      .then((data) => {
        // this.tracks = data.data.playlist.tracks;
        this.pylst = data.data.playlist;
        let trackIDS = data.data.playlist.trackIds.slice(
          (this.page - 1) * 20,
          20 * this.page
        );
        this.playList = data.data.playlist;
        let ids = trackIDS.map((d) => {
          return d.id;
        });
        return ids.join(",");
      })
      .then((ids) => {
        this.$http
          .get("http://localhost:3000/song/detail?ids=" + ids)
          .then((songData) => {
            songData.data.songs.map((d) => {
              d.song = {
                artists: d.ar,
              };
              this.hotSong.push(d); //加入值不会覆盖而是叠加
              return d;
            });

            // this.hotSong = songDat;//直接赋值，覆盖之前的值
          });
      });
    this.$http.get("comment/playlist/?id=" + this.listID).then((data) => {
      this.hotComents = data.data.hotComments;
      this.Coments = data.data.comments;
      console.log(this.hotComents);
      console.log("11", this.Coments);
    });
  },

  methods: {
    addMusicList(newSong) {
      //把当前最新的歌曲列表全部加入我的播放清单
      // this.$root.musicStore.musicList=this.$root.musicStore.musicList.concat(newSong);
      let newArr = this.$root.musicStore.musicList; //取出当前的播放列表
      newSong.map((d) => {
        //处理每一条newSong的音乐
        let find = false;
        for (let n of newArr) {
          if (n.id == d.id) {
            //找到了当前音乐在歌单内存在就不加入歌单
            find = true;
            break;
          }
        }
        if (!find) newArr.push(d); //如果当前音乐在newArr里面未找到则加入newArr
      });
      this.$root.musicStore.musicList = newArr;
    },
  },
};
</script>
<style lang="less"  scoped>
.box {
  background-color: #f5f5f5;
  .banner {
    width: 1000px;
    height: 100%;
    background-color: white;
    margin-left: 210px;
    .smit {
      height: 23px;
      line-height: 23px;
      padding: 0 10px;
      font-size: 12px;
      color: #666;
    }
  }
  .foot {
    height: 4500px;
    width: 100%;

    ul {
      li {
        // width: 1000px;
        // background-color: white;
        padding-left: 210px;
        width: 100%;
        display: -webkit-flex;
        display: -webkit-box;
        display: flex;
        -webkit-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        border-bottom: 1px solid #f5f5f5;
      }
    }
  }
}
</style>